<template>
  <div class="sub">
    <el-tabs v-model="subActiveName" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) in subTabsList"
        :key="index"
        :label="item.name"
        :name="String(item.name)"
        :data-id="item.component"
        lazy
      >
        <template v-if="index === 0">
          <div class="content">
            <el-descriptions :column="4" border>
              <el-descriptions-item
                v-for="(item2, index2) in descriptionsList"
                :key="index2"
                :label="item2"
                :label-style="{ background: '#F5FAFF', color: '#6D6D6D', textAlign: 'center', width: '8%' }"
                :content-style="{ width: '17%' }"
              >
                {{ info[index2] }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </template>
        <template v-else>
          <component :is="item.component" :project-id="projectId" />
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import ResponsiblePersons from '@/views/project/info/sub/subNavTabsPages/responsiblePersons.vue'
import IndividualInformation from '@/views/project/info/sub/subNavTabsPages/IndividualInformation.vue'

export default {
  name: 'BasicInfos',
  components: { ResponsiblePersons, IndividualInformation },

  props: {
    info: { type: Object, default: null },
    projectId: { type: String, default: '' }
  },
  data() {
    return {
      subTabsList: [
        { component: 'detail', name: '详细信息' },
        { component: 'ResponsiblePersons', name: '参与单位及相关负责人' },
        { component: 'IndividualInformation', name: '单体信息' }
      ],
      subActiveName: '详细信息',
      descriptionsList: {
        'ProjectName': '项目名称',
        'ProCode': '项目代码',
        'ProjectNum': '项目编码',
        'ProvincialNum': '项目省级编号',
        'ProjectType': '项目类型',
        'DistFullName': '行政地区',
        'ProAddress': '具体地点',
        'ProLocationX': '经纬度(x坐标)',
        'ProLocationY': '经纬度(y坐标)',
        'ProRatifyNum': '立项文号',
        'ProRatifyLevel': '立项级别',
        'ProRatifyUnit': '立项批复机关',
        'ProRatifyDate': '立项批复时间',
        'BuildCompanyName': '建设单位名称',
        'BuildCorpCode': '建设单位统一社会信用代码',
        'BuildPlanNum': '建设用地规划许可证编号',
        'ProPlanNum': '建设工程规划许可证编号',
        'ProInvestNature': '工程投资性质',
        'ProTwoDimCode': '项目二维码',
        'FundSource': '资金来源',
        'StateOwnedFundRatio': '国有资金出资比例',
        'ProTotalArea': '总面积(平米)',
        'ProTotalInvest': '总投资(万元)',
        'ProTotalLength': '总长度(米)',
        'BuildNature': '建设性质',
        'ProSize': '建设规模',
        'ProFunction': '工程用途',
        'IsMajor': '重点项目',
        'EndDate': '计划竣工',
        'BeginDate': '计划开工',
        'DataLevel': '数据等级',
        'ProEneConInfo': '建筑节能信息',
        'DataSource': '数据来源',
        'ProOverrunInfo': '超限项目信息'
      }
    }
  },
  created() {
    for (const i in this.info) {
      if (this.info[i] === null) {
        this.info[i] = '--'
      } else {
        this.info.ProLocation = '(' + this.info.ProLocationX + ',' + this.info.ProLocationY + ')'
        if (this.info.IsMajor === '0') {
          this.info.IsMajor = '否'
        } else if (this.info.IsMajor === '1') {
          this.info.IsMajor = '是'
        }
      }
    }
  },
  methods: {
    handleClick(tab) {
      this.activeNames = tab.name
    }
  }
}
</script>

<style scoped>
.sub {
  padding: 16px;
}

.content {
  margin-top: 16px;
}

.sub ::v-deep .el-tabs__item {
  border: 1px solid #E8E8E8;
  border-radius: 5px;
  margin-right: 10px;
  padding: 0 20px !important;
}

.sub ::v-deep .el-tabs__nav-wrap::after {
  height: 0;
}

.sub ::v-deep .el-tabs__active-bar {
  height: 0;
}

.sub ::v-deep .el-tabs__item.is-active {
  border-top: 1px solid #409eff !important;
  border: 1px solid #409eff;
  border-radius: 5px;
  color: #409eff;
  padding: 0 20px !important;
}

.sub ::v-deep .el-tabs__item {
  font-size: 15px;
  color: #5A5A5A;

}

.sub ::v-deep .el-tabs__item:hover {
  color: #409eff;
}
</style>
